<template>
	<div id="home" class="center">
		<div class="container">
			<div class="center" style="background-color: #ebf4ff;"><img src="../assets/dlbox.svg" /></div>
			<div class="center login-form-box">
				<h3>学生信息管理系统</h3>
				<el-form>
					<el-input placeholder="账号" v-model="loginData.id" clearable></el-input>
					<el-input placeholder="密码" type="password" v-model="loginData.password" show-password></el-input>
					<el-select v-model="loginData.type" placeholder="身份">
						<el-option v-for="item in loginTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-button type="primary" @click="login">登录</el-button>
				</el-form>
				<div class="login-others">
					<div><el-link @click="$router.push({ path: '/register' })">去注册？</el-link></div>
					<div><el-link @click="findPassword">找回密码？</el-link></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//登录表单信息
			loginData: {
				id: '',
				password: '',
				type: ''
			},
			//登录身份类型
			loginTypes: [
				{
					value: 1,
					label: '学生'
				},
				{
					value: 2,
					label: '管理员'
				}
			]
		};
	},
	methods: {
		/**
		 * 登录
		 */
		login() {
			let that = this;
			if (!that.loginData.id) {
				that.$message.error('请输入账号');
				return;
			}
			if (!that.loginData.password) {
				that.$message.error('请输入密码');
				return;
			}
			if (!that.loginData.type) {
				that.$message.error('请选择身份');
				return;
			}
			//请求后台验证密码
			that.axios
				.post(that.$store.state.serverHost + '/' + (that.loginData.type == '2' ? 'administrator' : 'student') + '/login/', that.loginData)
				.then(res => {
					console.log(res);
					if(res.data=="用户名或密码错误"){
						that.$message.error("用户名或密码错误")
						return
					}
					let reg = new RegExp("'", 'g');
					let data = JSON.parse(res.data.replace('"', '').replace(reg, '"'));
					let user
					if(that.loginData.type=='2'){
						user = {
							id: data.pk,
							name: data.fields.admin_name,
							sex: data.fields.admin_sex,
							duty: data.fields.admin_duty,
							telephone: data.fields.admin_phone,
							birthday: data.fields.admin_birthday,
							type: 2
						};
					}else{
						user={
							id:data.pk,
							name: data.fields.student_name,
							sex:data.fields.student_sex,
							telephone:data.fields.student_phone,
							birthday:data.fields.student_birthday,
							department:data.fields.student_department,
							class:data.fields.student_class,
							type:1
						}
					}
					that.$store.commit('setUser', user);
					that.$message({
						message: '登录成功',
						type: 'success'
					});
					setTimeout(() => {
						that.$router.push({ path: '/admin' });
					}, 500);
				})
				.catch(e => {
					console.log(e);
					that.$message.error('登录失败');
				});
		},
		/**
		 * 找回密码，提示管理员老师电话
		 */
		findPassword() {
			this.$alert('管理员老师电话：13012341234', '请联系管理员老师', { confirmButtonText: '确定' });
		}
	}
};
</script>

<style scoped>
#home {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.container {
	width: 80%;
	height: 80%;
	background-color: #fff;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
	border-radius: 0.5rem;
	display: flex;
}
.container div {
	flex: 1;
	flex-direction: column;
}
.container div > img {
	width: 75%;
}
.login-form-box {
	padding: 5%;
}
.login-form-box form {
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
.login-form-box form > * {
	width: 100%;
	margin: 5% 0;
}
.login-others {
	width: 100%;
	display: flex;
	flex-direction: row !important;
	flex: unset !important;
	align-items: center;
	justify-content: space-between;
	text-align: center;
}
.router {
	display: none;
}
</style>
